<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>众筹主题详情</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/zc_act_detail.css">
    <link rel="stylesheet" href="${ctx}/css/common/img_text.css">
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <link rel="stylesheet" href="${ctx}/css/ui/system/member/member_list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/member_act_list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style type="text/css">
        .act-main-body {
            max-height: max-content !important;
        }

        .act-main-body .img-text-content {
            margin-right: 75px;
        }
    </style>
</head>
<%@include file="../include/header.jsp" %>
<body>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <section>
        <div class="section-main">
            <div class="act-detail-head mt20">
                <div class="act-detail-content">
                    <div class="detail-logo common-img">
                        <img src="<c:if test="${ event.pic!= null}">${event.pic}?imageMogr2/auto-orient/crop/300x180</c:if>"
                             alt="" onerror="txz.errImg(this)" onload="txz.imgLoad(this)">
                    </div>
                </div>
                <div class="content-text">
                    <p class="f24 text-titel">${event.name}</p>
                    <p class="f16 text-element">
                        <i class="iconfont icon-remind btn-icon"></i> 活动开始时间：
                        <fmt:formatDate value="${event.startTime}" pattern="yyyy-MM-dd HH:mm"/>
                    </p>
                    <%--<p class="f16 text-element">
                        <i class="iconfont icon-moneybag btn-icon"></i> 活动金额：<strong class="red"><fmt:formatNumber
                            value="${event.price}" pattern="0.00"/></strong>&nbsp;元/位
                    </p>--%>
                    <p class="f16 text-element">
                        <i class="iconfont icon-rank btn-icon"></i> 浏览量：<strong
                            class="active-red">${viewNum == null ? 0: viewNum}</strong>&nbsp;次
                        <%--<i class="iconfont icon-people btn-icon "></i> 人数上限：<strong
                            class="red">${event.limitNum == null? 0:event.limitNum}</strong>&nbsp;人--%>
                        <i class="iconfont icon-people btn-icon ml-30"></i> 报名人数：<strong
                            class="red">${empty eventCount.applyTotal ? 0 : eventCount.applyTotal}</strong>&nbsp;人
                        <i class="iconfont icon-people btn-icon  ml-30"></i>
                        众筹成功：
                        <strong class="red">${empty eventCount.crowdfundSucccessTotal ? 0 : eventCount.crowdfundSucccessTotal}</strong>&nbsp;人
                        <i class="iconfont icon-people btn-icon  ml-30"></i>

                        支持人数：<strong
                            class="red">${empty eventCount.crowdfundSupportTotal ? 0 : eventCount.crowdfundSupportTotal}</strong>&nbsp;人
                        <i class="iconfont icon-moneybag btn-icon ml-30"></i>
                        已筹金额：<strong class="red">
                        <fmt:formatNumber value="${empty eventCount.payedTotal ? 0 : eventCount.payedTotal}" pattern="0.00"/></strong>&nbsp;元
                    </p>
                    <div>
                        <p class="f16 text-element" style="float: left">
                            <i class="iconfont icon-remind btn-icon"></i> 发布时间：<fmt:formatDate
                                value="${event.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </p>
                        <p class="f16 text-element" style="float: left">
                            <i class="iconfont icon-remind btn-icon  ml-30"></i> 报名截止时间：<fmt:formatDate
                                value="${event.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </p>
                        <p class="f16 text-element">
                            <i class="iconfont icon-remind btn-icon  ml-30"></i> 修改时间：<fmt:formatDate
                                value="${event.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </p>
                    </div>
                    <p class="f16 text-element">
                        <i class="iconfont icon-location btn-icon"></i> 活动地点：
                        ${address}
                    </p>
                </div>
            </div>
            <div class="layui-tab mt20">
                <ul class="layui-tab-title">
                    <li class="layui-this">详情描述</li>
                    <li>报名相关</li>
                    <li>参赛标准</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="content">
                            <div class="act-main-body img-text-content">
                                ${eventDetail.content}
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="applyRelated">
                            <div class="act-main-body img-text-content">
                                ${eventDetail.applyRelated}
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="matchStandard">
                            <div class="act-main-body img-text-content">
                                ${eventDetail.matchStandard}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%@include file="../include/footer.jsp" %>
    </section>
</div>

<script type="text/javascript" src="${ctx}/script/common/img_text.js"></script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript">
    var activeTab = 1;
    var laytpl = null;
    var laypage = null;
    var element = null;

    txz.initHeader({
        nav: [{
            name: '众筹主题管理',
            href: '${ctx}/crowdfund/event/list.do',
        }, {
            name: '众筹主题详情',
            curr: true
        }],
        btns: [{
            type: 'back'
        }]
    });
    $(function () {

        layui.use(['laytpl', 'laypage', 'element'], function () {
            element = layui.element;
            element.on('tab', function (data) {
                var content = $(".layui-tab-content").find(".layui-show").find(".img-text-content");
                var imgs = $(content).find("img");
                for (var i = 0; i < imgs.length; i++) {
                    var img = imgs[i];
                    imgText.changeWH(img);
                }
            });
        });
        $(".img-text-content").each(function (index, element) {
            imgText.initImgNew(this);
        });
        setTimeout(function () {
            var recommendSettings = {
                parent: $('#content .img-text-content')
            };
            $('.lazy-img').picLazyLoad(recommendSettings);

            var detailSettings = {
                parent: $('#applyRelated .img-text-content')
            };
            $('.lazy-img').picLazyLoad(detailSettings);

            var noticeSettings = {
                parent: $('#matchStandard .img-text-content')
            };
            $('.lazy-img').picLazyLoad(noticeSettings);
        }, 100);
    })
</script>
</body>
</html>
